<template>
  <div>
    <Login v-show='status === 1' @onChangeLodeStatus="changeLodeStatus" />
    <Code v-show='status === 2' @onChangeLodeStatus="changeLodeStatus" :qrLoginId='qrLoginId'/>
    <ScanSuccess v-show='status === 3' @onChangeLodeStatus="changeLodeStatus"/>
    <Loding v-show='status === 4' @onChangeLodeStatus="changeLodeStatus" :status='status'/>
  </div>
</template>

<script>
import Login from '../components/login/Login'
import Loding from '../components/login/Loding'
import Code from '../components/login/Code'
import ScanSuccess from '../components/login/ScanSuccess'
import { openSocket } from '../api/QrLoginSocket.js'
export default {
  components: { Login, Loding, Code, ScanSuccess },
  data () {
    return {
      loding: false,
      qrLoginId: '', // 二维码登录的数据
      status: 2 // status 1:账号密码登录；2：验证码登录；3：扫码成功；4：登录中
    }
  },
  created () {
    // 开启连接
    openSocket.createWebSocket(this.loginSocketReceivedHandler)
  },
  methods: {
    changeLodeStatus (e) {
      this.status = e
    },
    loginSocketReceivedHandler (res) {
      const that = this
      if (res) {
        switch (res.status) {
          case 'init':
            that.qrLoginId = res.data.qrLoginId
            break
          case 'scan':// 跳转到扫码成功页面
            that.$store.dispatch('app/setSuccessDataInfo', res)
            break
          case 'agree':
            sessionStorage.setItem('aillo_token', res.data.token)
            sessionStorage.setItem('aillo_name', res.data.name)
            sessionStorage.setItem('aillo_id', res.data.userId)
            sessionStorage.setItem('aillo_avatar', res.data.avatar)
            sessionStorage.setItem('aillo_introduce', res.data.introduce)
            sessionStorage.setItem('aillo_region', res.data.region)
            sessionStorage.setItem('aillo_uid', res.data.uid)
            sessionStorage.setItem('aillo_dialCode', res.data.dialCode)
            sessionStorage.setItem('aillo_mobile', res.data.mobile)
            sessionStorage.setItem('aillo_sex', res.data.sex)
            this.changeLodeStatus(4)
            sessionStorage.setItem('aillo_loding', true)
            break
          case 'reject':
            this.changeLodeStatus(1)
            break
          default:
            break
        }
      }
    }

  },
  destroyed () {
    if (openSocket.ws) {
      openSocket.ws.close('1000', 'Normal Closure')
    }
  }
}
</script>

<style>
</style>
